<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>详情</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/oksub.css">
	<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"/>
<style>
	#editor—wrapper {
		border: 1px solid #ccc;
		z-index: 100;
		/* 按需定义 */
	}

	#toolbar-container {
		border-bottom: 1px solid #ccc;
	}

	#editor-container {
		height: 350px;
	}
</style>

</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<form class="layui-form layui-form-pane ok-form">
		<div class="layui-form-item">
			<label class="layui-form-label">标题</label>
			<div class="layui-input-block">
				<input type="text" name="title" placeholder="公告标题" class="layui-input" disabled>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">是否置顶</label>
			<div class="layui-input-block">
				<input type="radio" name="is_top" value="1" title="是" disabled>
                <input type="radio" name="is_top" value="0" title="否" disabled>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">内容</label>
			<div class="layui-input-block">
				<div id="editor—wrapper">
					<div id="toolbar-container"><!-- 工具栏 --></div>
					<div id="editor-container"><!-- 编辑器 --></div>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<a class="layui-btn layui-btn-primary close">关闭</a>
			</div>
		</div>
	</form>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script type="text/javascript">
	layui.use(["form", "okLayer", "okUtils", "okMock", "laydate"], function () {
		let $ = layui.jquery;
		let form = layui.form;
		let okMock = layui.okMock;
        let laydate = layui.laydate;
		let okLayer = layui.okLayer;
		let okUtils = layui.okUtils;

		//关闭loading
		okLoading.close();

		const { createEditor, createToolbar } = window.wangEditor

		const editorConfig = {
			readOnly: true,
		}

		const editor = createEditor({
			selector: '#editor-container',
			html: '<p><br></p>',
			config: editorConfig,
		})


		//获取url地址中的参数
        var id = okUtils.getUrlParams("id");
		//获取详情
		okUtils.ajax(okMock.api.notice.detail, "get", {id: id}).done(function (response) {
			if (response.code == HTTP_OK) {
				//将数据填充到表单中
				$('input[name="title"]').val(response.data.title);
				$('input[name="is_top"][value="' + response.data.is_top + '"]').prop('checked', true);
				//将内容填充到编辑器中
				editor.setHtml(response.data.content);
				form.render();
			} else {
				layer.msg(response.message, { icon: 2, time: 2000 });
			}
		}).fail(function (error) {});

		//关闭当前页面
        $(".close").click(function () {
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index);
        });
		
	})
</script>
</body>
</html>
